<!-- 时间段 -->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加时间段条件"
    style="width: 40%; height: 100%; float: right; margin: 0"
    :before-close="Cancel"
    :close-on-click-modal="false"
  >
    <el-form :model="form" :rules="rules" ref="ruleFormRef" label-position="top">
      <!-- 重复时间 -->
      <!-- <el-form-item label="重复时间" style="padding: 3%">
        <el-checkbox v-model="WeekAll" label="*" @change="Checkall">全选</el-checkbox>
        <el-checkbox-group v-model="form.executionWeek" size="large">
          <el-checkbox-button label="MONDAY" border>星期一</el-checkbox-button>
          <el-checkbox-button label="TUESDAY" border>星期二</el-checkbox-button>
          <el-checkbox-button label="WEDNESDAY" border>星期三</el-checkbox-button>
          <el-checkbox-button label="THURSDAY" border>星期四</el-checkbox-button>
          <el-checkbox-button label="FRIDAY" border>星期五</el-checkbox-button>
          <el-checkbox-button label="SATURDAY" border>星期六</el-checkbox-button>
          <el-checkbox-button label="SUNDAY" border>星期日</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item> -->
      <el-form-item label="时间" style="margin: 4% 0 0 3%">
        <div>
          <el-time-picker
            v-model="startTime"
            placeholder="选择开始时间"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            style="width: 100%; margin-bottom: 10px"
            @change="handlestartTime"
          />
          <el-time-picker
            v-model="endTime"
            placeholder="选择结束时间"
            format="HH:mm:ss"
            value-format="HH:mm:ss"
            style="width: 100%"
            @change="handleendTime"
          />
          <!-- <div v-if="error" style="color: red; margin-top: 10px">
            {{ error }}
          </div> -->
        </div>
      </el-form-item>
      <!-- <el-form-item label="间隔时间(以秒为单位)" style="margin: 4% 0 0 3%" prop="intervalTime">
        <el-input v-model="form.intervalTime" placeholder="请输入间隔时间(以秒为单位)"></el-input>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="showDelete" type="danger" @click="DeleteConditions">删除</el-button>
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
        <!-- <el-button type="primary" @click="validateTime"> 确定456 </el-button> -->
      </div>
    </template>
  </el-dialog>
</template>
   
<script>
import { defineComponent, ref, watch, onMounted, reactive } from 'vue'
import { ElTimePicker } from 'element-plus'
import { ElMessage } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'

export default defineComponent({
  setup(_, { emit }) {
    // 监听日期的全选和反选

    onMounted(() => {
      watch(
        () => form.executionWeek,
        (newValue) => {
          if (newValue.length === 7) {
            WeekAll.value = ['*']
          } else {
            WeekAll.value = ['']
          }
        }
      )
    })
    // 页面 表单
    const form = ref({
      conditionType: 'AUTO_SCHED_CONDITION_TYPE_TIME_PERIOD',
      startTime: '',
      endTime: '',
      intervalTime: '10',
      executionWeek: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'],
      statusName: '时间段',
      week: '',
      id: '',
      Change: 'TimePeriod'
    })

    const startTime = ref('00:00:00')
    const endTime = ref('23:59:59')
    // const error = ref('')
    // 表单实例对象
    const ruleFormRef = ref(null)
    // 页面 表单校验规则
    const rules = reactive({
      intervalTime: [{ required: true, message: '请输入延时时间', trigger: 'blur' }]
    })
    // 页面 显示 隐藏
    const dialogVisible = ref(false)
    // 页面 星期 全选
    const WeekAll = ref(['*'])
    const showDelete = ref(false)
    //
    const isChange = ref('add')
    const week = ref([
      { name: 'MONDAY', value: '星期一' },
      { name: 'TUESDAY', value: '星期二' },
      { name: 'WEDNESDAY', value: '星期三' },
      { name: 'THURSDAY', value: '星期四' },
      { name: 'FRIDAY', value: '星期五' },
      { name: 'SATURDAY', value: '星期六' },
      { name: 'SUNDAY', value: '星期日' }
    ])
    //
    //
    //
    // 页面 全选 点击事件
    const Checkall = () => {
      const allweek = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY']
      if (WeekAll.value.length) {
        form.value.executionWeek = allweek
      } else {
        form.value.executionWeek = []
      }
    }
    // 页面 确定
    const submit = () => {
      ruleFormRef.value.validate((validate) => {
        if (validate) {
          form.value.startTime = startTime.value
          form.value.endTime = endTime.value
          form.value.id = uuidv4()

          let result = []
          week.value.forEach((item) => {
            form.value.executionWeek.forEach((event) => {
              if (item.name === event) {
                result.push(item.value)
              }
            })
          })
          form.value.week = result
          emit('updataTimePeriod', [form.value], isChange.value)
          Cancel()
        }
      })
      // if (cronDisabled.value) {
      //
      //   emit('updataTimePeriod', list)
      //   Cancel()
      // } else {
      //   emit('updataTimePeriod', list)
      //   Cancel()
      // }
    }
    const validateTime = () => {}
    // 页面 取消
    const Cancel = () => {
      form.value.time = ['00:00:00', '23:59:59']
      form.value.intervalTime = '10'
      isChange.value = 'add'
      dialogVisible.value = false
      startTime.value = '00:00:00'
      endTime.value = '23:59:59'
      showDelete.value = false
    }

    // 修改
    const changeValue = (data) => {
      form.value = data[0]
      dialogVisible.value = true
    }

    const onChange = () => {}

    // 删除
    const DeleteConditions = () => {
      emit('DeleteConditions')
      Cancel()
    }

    const handlestartTime = () => {
      if (!startTime.value) {
        startTime.value = '00:00:00'
      }
    }
    const handleendTime = () => {
      if (!endTime.value) {
        endTime.value = '00:00:00'
      }
    }
    return {
      showDelete,
      dialogVisible,
      form,
      rules,
      ruleFormRef,
      WeekAll,
      isChange,
      startTime,
      endTime,
      Checkall,
      Cancel,
      submit,
      onChange,
      changeValue,
      validateTime,
      DeleteConditions,
      handlestartTime,
      handleendTime
    }
  }
})
</script>
   
   <style>
</style>